<template>
  <div class="context-menu-wrapper">
    <input readonly @focus="onMenuShow" @blur="onBlur" />
    <el-icon :class="{ 'context-menu-more': true, vertical: vertical }" :style="{ color: color }">
      <More />
    </el-icon>
    <div v-show="menuPopupVisible">
      <div
        :class="{ 'context-menu-popup': !vertical, 'is-vertical': vertical }"
        :style="{ color: color }"
      >
        <div class="context-menu-inner" @click="onMenuClick(MENU_TYPE.EDIT)">
          <el-icon style="margin-right: 5px;margin-top: 2px">
            <Edit />
          </el-icon>
          {{$t("modal.edit")}}
        </div>
        <div class="context-menu-inner" @click="onMenuClick(MENU_TYPE.COPY)">
          <el-icon style="margin-right: 5px">
            <CopyDocument />
          </el-icon>
          {{$t("modal.copy")}}
        </div>
        <div class="context-menu-inner" @click="onMenuClick(MENU_TYPE.DELETE)">
          <el-icon style="margin-right: 5px">
            <Delete />
          </el-icon>
          {{$t("modal.delete")}}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { CopyDocument, Delete, Edit, More } from "@element-plus/icons-vue";
import { ref } from "vue";
import {MENU_TYPE} from "./ENUM";


withDefaults(
  defineProps<{
    color?: string;
    vertical?: boolean;
  }>(),
  {
    color: "#333",
    vertical: false
  }
);
const emit = defineEmits<{
  (event: "select", value: number): void;
}>()
const menuPopupVisible = ref(false);

const onMenuShow = () => {
  menuPopupVisible.value = !menuPopupVisible.value;
};
const onMenuClick = (type: number)=> {

  emit("select", type);
}
const onBlur = ()=> {
  setTimeout(()=> {
    menuPopupVisible.value = false
  }, 200)
}
</script>
<style scoped lang="scss">
@import "@/theme";
.context-menu-wrapper {
  position: relative;
  width: 20px;
  height: 20px;
  background-color: transparent;

  input {
    width: 20px;
    height: 20px;
    padding: 0;
    cursor: pointer;
    outline: none;
    background-color: transparent;
    border: none;

    &:hover {
      box-shadow: 1px 0 3px #d0d0d0;
    }
  }

  .context-menu-more {
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 5;
    pointer-events: none;
    top: 4px;
    left: 1px;
  }

  .context-menu-popup {
    position: absolute;
    z-index: 10;
    background-color: #f6f6f6;
    min-width: 120px;
    min-height: 40px;
    transform: translate(-100px, -130px);
    box-sizing: border-box;
    box-shadow: 2px 3px 8px #a8a8a8;
    border-radius: 6px;
    overflow: hidden;
    animation: pop; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 0.2s; /* don't forget to set a duration! */
    animation-timing-function: ease-in-out;
    .context-menu-inner {
      padding: 10px 10px;
      box-sizing: border-box;
      border-bottom: 1px solid #e1e1e1;
      font-size: smaller;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      &:hover {
        background-color: rgba(85, 63, 197, 0.9);
        color: #fff;
        cursor: pointer;
      }
    }
  }
  .is-vertical {
    @extend .context-menu-popup;
    transform: translate(-90px, 0);
    animation-name: pop-vertical;
    .context-menu-inner {
      padding: 10px 10px;
      box-sizing: border-box;
      border-bottom: 1px solid #e1e1e1;
      font-size: smaller;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      &:hover {
        background-color: rgba(85, 63, 197, 0.9);
        color: #fff;
      }
    }
  }
}
@keyframes pop {
  from {
    border-radius: 50%;
  }
  to {
    border-radius: 6px;
  }
}
@keyframes pop-vertical {
  from {
    border-radius: 50%;
  }
  to {
    border-radius: 6px;
  }
}
.vertical {
  transform: rotateZ(90deg);
}
</style>
